<template>
	<view>
		<NavBar title="疗程介绍" backTo="prev"></NavBar>
		<view class="topBar" :style="{marginTop:navBarHeight+'px'}">
			<view class="leftInfo">
			    <view class="headline">{{name}}</view>
			    <view class="mins">时长：{{mins}}分钟</view>
			</view>
			<view class="rightInfo">
			    <view class="newPrice">
			        <view class="CNY">￥</view> 
			        <view class="price">{{new_price}}</view>
			    </view>
			    <view class="oldPrice">￥{{old_price}}</view>
			</view>
		</view>
		<img :src="poster_url" class="landingPage" mode="widthFix"/>
		<view class="bookWrap">
		    <view class="book" @click="handleBookBtn">立即预约</view>
		</view>
	</view>
</template>

<script>
	import NavBar from '@/components/NavBar.vue';
	import {Request,getGlobalData} from '@/util.js'; 
	const domain = getGlobalData('domain');
	const navBarHeight = uni.getStorageSync('navBarHeight');
	
	export default {
		data(){
			return {
				navBarHeight:navBarHeight,
				name: "",
				mins: "",
				new_price: "",
				old_price: "",
				poster_url: ""
			}
		},
		onShow(){
			let selectedTreatment = uni.getStorageSync('selectedTreatment');
			//获取选择的疗程资料
			Request(domain + "/client/treatment/treatmentForDetailPage",{name:selectedTreatment}).then((res)=>{
				let {name,mins,new_price,old_price,poster_url} =  res.data.data;
				this.name = name;
				this.mins = mins;
				this.new_price = new_price;
				this.old_price = old_price;
				this.poster_url = poster_url;				
			});
		},
		methods:{
			handleBookBtn(){
				uni.switchTab({
					url:'/pages/book/index'
				})
			}
		},
		components:{
			NavBar,
		}
	}
</script>

<style lang="less">
	@import "../../uni.less";
	
	page{
	    background-color: @background_color;
	    padding-bottom:180rpx;
	}
	
</style>

<style scoped lang="less">
	.topBar{
	    display: flex;
	    width: 90%;
	    margin: 0 auto;
	    margin-bottom:10rpx;
	
	    .leftInfo{
	        width: 88%;
	        margin: 2rpx auto;
	        display: flex;
	        flex-direction:column;
	        width: 75%;
	        // border:1rpx solid #000;
	        .headline{
	            color:#63403F;
	            font-size: 36rpx;
	            font-weight: 450;
	        }
	
	        .mins{
	            margin-top: 10rpx;
	            font-size: 25rpx;
	            color:#63403F;
	        }
	    }
	
	    .rightInfo{
	        width: 25%;   
	        display: flex;
	        flex-direction: column;
	
	        .newPrice{
	            display: flex;
	            justify-content: flex-end;
	            // border:1rpx solid #000;
	            .price{
	                // border:1rpx solid #000;
	                height: 100%;
	                font-size: 48rpx;
	                font-weight: bolder;
	                color:#AD5353;
	                text-align: right;
	                display: flex;
	                justify-content: right;
	            }
	           
	            .CNY{
	                // border:1rpx solid #000;
	                color:#AD5353;
	                font-weight: bolder;
	                margin-top: 20rpx;
	                font-size: 29rpx;
	            }
	        }
	
	        .oldPrice{
	            text-align: right;
	            font-size: 24rpx;
	            color:#63403F;
	            font-weight: 400;
	            text-decoration:line-through;
	        }
	    }
	}
	
	.landingPage{
	    width: 100%;
	}
	
	.bookWrap{
	    position: fixed;
	    width: 100%;
	    height: 80rpx;
	    bottom: 60rpx;
	    // border:1rpx solid #000;
	    line-height: 80rpx;
	    font-size: 40rpx;
	   
	    text-align: center;
	
	    .book{
	        height: 100%;
	        border-radius: 50rpx;
	        background-color: #D1A8A8;
	        margin: 0 auto;
	        width: 40%;
	        font-weight: 400;
	        color: white;
	
	    }
	}

</style>